<template>
    <div>
        <HighlightInput v-model="modelValue" @submit="onSubmit" @enter="onEnter" :allowLineBreak="false"
            :keep-brackets="false" @change="onChange" />
        <a-button type="primary" @click="submitValue" style="margin-top: 16px;">提交</a-button>
    </div>
</template>

<script setup>
import HighlightInput from "../components/HighlightTextInput.vue";
import { ref, onMounted } from "vue";

const modelValue = ref('我已上传[案情摘要和我方证据目录]，请根据这些内容，为我草拟一份关于[（xx案由）纠纷]的起诉状。');
const eventLogs = ref([]);

function submitValue() {
    console.log("数据提交：", modelValue.value);
}

function onSubmit(data) {
    addEventLog('📤 提交', `完整文本: ${data.fullText}`);
    console.log('表单提交:', data);
}

function onEnter(fullText) {
    addEventLog('⏎ 回车', `在最后一个区域按下回车键`);
    console.log('回车键按下:', fullText);
}

function addEventLog(type, content) {
    eventLogs.value.unshift({
        type,
        content,
        time: new Date().toLocaleTimeString(),
    });

    if (eventLogs.value.length > 20) {
        eventLogs.value.pop();
    }
}

function onChange(data) {
    addEventLog('✏️ 变化', `文本已更新`);
    console.log('内容变化:', data);
}

onMounted(() => {
    console.log('组件已挂载');
});
</script>

<style scoped></style>